<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>店铺首页图片显示</title>  
<style>  
    /* 移除body的默认边距 */  
    body {  
        margin: 0;  
        padding: 0;  
    }  
  
    /* 设置图片容器的样式 */  
    .image-container {  
        /* 防止图片下方的间隙，有时是由img元素下方的基线导致的 */  
        line-height: 0;  
        font-size: 0;  
        width: 100vw; /* 设置图片容器的宽度为100vw */
    }  
  
    /* 设置图片的样式 */  
    .image-container img {  
        display: block; /* 让图片占据容器的整个宽度 */  
        margin: 0; /* 移除图片的外边距 */  
        padding: 0; /* 移除图片的内边距 */  
        border: none; /* 移除图片边框（如果需要的话） */  
        width: 100%; /* 让图片占据容器的整个宽度 */  
        height: auto; /* 自动调整高度以保持缩放比 */  
    }  
</style>  
</head>  
<body>
<div class="image-container">
</div>
<script>
function loadImage(url) {
    var img = document.createElement('img');
    img.setAttribute('src', url);
    var imageContainer = document.querySelector('.image-container'); // 也可以在函数内部获取容器
    imageContainer.appendChild(img);
    console.log('插入图片：'+url+' 成功');
}
function loadBitmap(base64ImageData) {
    console.log('开始插入Bitmap图像'+base64ImageData);
    //var img = document.createElement('img');
    // 直接将Base64编码的Bitmap数据设置为img的src属性
    //img.src = 'data:image/png;base64,' + base64ImageData; // 假设是PNG格式，根据实际情况调整MIME类型
    //console.log('data:image/png;base64,' + base64ImageData);
    //var imageContainer = document.querySelector('.image-container'); // 获取容器元素
    //imageContainer.appendChild(img);
    //console.log('插入Bitmap图像成功');
}
//loadImage('http://192.168.8.96:8080/api/image/12');
//var test = 100;
</script>
</body>  
</html>